<template>
  <div class="bt-wrapper">
    <BehaviorDesignerIndex
      dnd-node-parent-class-name=".dnd-task-list"
      dnd-node-class-name=".dnd-task-item"
      @node-selected="handleNodeSelect"
    />
  </div>
</template>

<script setup lang="ts">
import BehaviorDesignerIndex from '@jl/behavior-designer/src/components/behavior-designer/index.vue';
import {
  fieView,
  getGlobalVariables,
  getNodeProperties,
  registerNode,
  render,
} from '@jl/behavior-designer/src/components/behavior-designer/service';
import { taskAll } from '../../behavior-task';

defineOptions({
  name: 'BehaviorDesignerEditor',
});

const selectedNode = ref();

const handleNodeSelect = (node: any) => {
  console.log('handleNodeSelect', node);
  selectedNode.value = node;
  if (node) {
    console.log(getNodeProperties(node.id));
  }
};

onMounted(() => {
  registerNode(
    taskAll.map((o) => {
      const { type, label, icon, nodeType } = o;
      return { type, text: label, icon, nodeType };
    })
  );
  nextTick(() => {
    render({
      rawData: {
        nodes: [
          {
            id: 'root',
            type: 'Entry',
            x: 200,
            y: 200,
            text: '节点1',
          },
          {
            id: '2',
            type: 'Sequence',
            x: 300,
            y: 200,
            text: '节点2',
          },
          {
            id: '3',
            type: 'Wait',
            x: 400,
            y: 200,
            text: '节点3',
          },
          {
            id: '4',
            type: 'Log',
            x: 500,
            y: 200,
            text: '节点4',
          },
          {
            id: '5',
            type: 'Repeater',
            x: 600,
            y: 200,
            text: '节点5',
          },
        ],
        edges: [],
      },
      treeData: {
        id: '123456',
        treeData: {
          id: '123456',
          type: 'Entry',
          properties: {},
          children: [],
        },
      },
      separateNodes: [],
    });
    fieView(500);
    console.log(getGlobalVariables());
  });
});
</script>

<style lang="less" scoped>
.bt-wrapper {
  width: 100vw;
  position: absolute;
  left: 60px;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
</style>
